<template>
  <div>
    <vue-office-docx :src="`/dev-api/ufs/download/${fileId}`" @rendered="renderingCompleted" />
    <!-- <vue-office-docx :src="`/dev-api/ufs/download/1781571116255547392`" @rendered="renderingCompleted" /> -->
  </div>
</template>
<script setup name="FileList">
import { ref, watch } from 'vue'
import { exportList } from "@/api/design/export.js";
import { getPreview } from '@/api/salvage/fileReport.js'
import VueOfficeDocx from '@vue-office/docx';
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
import '@vue-office/docx/lib/index.css'
import useApp from "@/hooks";
const { $, proxy } = useApp();
const query = ref({
  schemeId: props.fileIds.id,
  templateFileId: "",
  type: props.fileIds.type
})
const fileId = ref()
const emit = defineEmits(["close", "complete"]);
const show = ref(false);
const props = defineProps({
  fileIds: {
    type: Object
  }
});
//监听组件数据变化

watch(() => props.fileIds, (newValue, oldValue) => {
  console.log('props.fileIds', props.fileIds.type)
  getData(props.fileIds.type);
});

function getData(type) {
  // console.log('sssfile', props.fileIds);
  let queryTemplate = { templateDesc: type, templateVersion: "" };
  query.value.type = type
  exportList(queryTemplate).then((r) => {
    query.value.templateFileId = r[r.length - 1].templateFileId;
    getPreview(query.value).then(res => {
      console.log('res', res);
      fileId.value = res.id
    })
  });
}
function renderingCompleted() {
  console.log("渲染完成")
  //$.$modal.closeLoading()
}
function cellClick(e) {
  // $.$modal.loading('加载中')
  show.value = true;
  // console.log(e)
  let fileId = e.id;
  //  download("/nepu/files/" + fileId, {}, e.fileName).then((res) => { });
}
getData(props.fileIds.type);
</script>

<style></style>